<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>管理员页面</title>
<style>
       /* styles.css */
.out {
    text-align: center;
    margin-top: 20px; /* 与上方内容保持一定距离 */
}

.addProduct, .showProduct, .category, .provider, .exit ,.user{
    padding: 10px 20px;
    margin: 5px; /* 按钮之间的间距 */
    border: none; /* 无边框 */
    border-radius: 5px; /* 圆角边框 */
    background-color: #4CAF50; /* 背景颜色 */
    color: white; /* 文字颜色 */
    font-size: 16px; /* 字体大小 */
    cursor: pointer; /* 鼠标悬停时显示手形图标 */
    transition: background-color 0.3s; /* 背景颜色变化的过渡效果 */
}

.addProduct:hover, .showProduct:hover, .category:hover, .provider:hover, .exit:hover {
    background-color: #45a049; /* 鼠标悬停时的背景颜色 */
}

/* 为不同的按钮添加不同的背景色 */
.addProduct { background-color: #2196F3; }
.showProduct { background-color: #9C27B0; }
.category { background-color: #FF9800; }
.provider { background-color: #3F51B5; }
.exit { background-color: #f44336; }

/* 鼠标悬停时的背景色 */
.addProduct:hover { background-color: #1E88E5; }
.showProduct:hover { background-color: #7B1FA2; }
.category:hover { background-color: #F57C00; }
.provider:hover { background-color: #303F9F; }
.exit:hover { background-color: #E53935; }

/* 按钮中的图标样式 */
button i {
    margin-right: 5px; /* 图标与文字的间距 */
}

/* 响应式设计 */
@media (max-width: 768px) {
    .out button {
        width: 100%; /* 在小屏幕上按钮宽度为100% */
        margin: 5px 0; /* 垂直方向的间距 */
    }
}
    </style>
</head>
<body>
	<c:if test="${sessionScope.admin!=null }">
		<div class="out">
		<button class="user" id="user">用户管理</button>
		<button class="addProduct" id="add">添加商品</button>
		<button class="showProduct" id="show">查看商品</button>
		<button class="category" id="category">类别管理</button>
		<button class="provider" id="provider">供应商管理</button>
		<button class="exit" id="exit">退出</button>
	</div>
	</c:if>
	
	<script src="../js/jquery.min.js"></script>
	<script>
		$(document).ready(function(){
			$("#user").click(function(){
				window.location.href="AdminUserServlet";
			})
			$("#add").click(function(){
				window.location.href="AdminCategoryServlet";
			})
			$("#show").click(function(){
				window.location.href="AdminGoodsListServlet";
			})
			$("#exit").click(function(){
				window.location.href="../ExitServlet";
			})
			$("#category").click(function(){
				window.location.href="AdminCategoryServlet2";
			})
			$("#provider").click(function(){
				window.location.href="AdminProviderServlet";
			})
		})
	</script>
</body>
</html>